<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<h1 class="page-header">{{ moviesList.title }}</h1>

	<div class="row placeholders">

		<div class="media" ng-repeat='item in moviesList.subjects'>
			<a class="media-left" href="#/detail/{{item.id}}">
				<img src="{{item.images.medium}}">
			</a>
			<div class="media-body">
				<span class="badge pull-right ">{{ item.rating.average }}</span>
				<h2 class="media-heading">{{ item.title }}</h2>
				<p class="media-heading">类型：<span ng-repeat="a in item.genres">{{ a }}&nbsp;&nbsp;</span></p>
				<p class="media-heading">导演：<span ng-repeat="a in item.directors">{{ a.name }}&nbsp;&nbsp;</span></p>
				<p class="media-heading">主演：{{ item.casts | typeFilter }}</p>
			</div>
		</div>
		<!--分页-->
		<nav ng-show="!loading">
			<p class="tc">总共：{{page.totalCount}}条记录，第{{page.current}}/{{page.totalPage}}页</p>
			<ul class="pager">
				<li ng-class="{disabled:page.current<=1}"><a ng-click="goBack()">上一页</a></li>
				<li ng-class="{disabled:page.current>=page.totalPage}"><a ng-click="goForward()">下一页</a></li>
			</ul>
		</nav>
	</div>
	<!--loading效果-->
	<div class="loading" ng-show="loading">
		<div class="spinner">
			<div class="spinner-container container1">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container2">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container3">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
		</div>
	</div>

</body>
</html>
